<template>
  <div id="utils-investigate">
    <div class="form-wrap mb20">
      <div v-for="(item, idx) in data.fields" :key="idx">
        <os-entry :item="item">
          <el-select v-model="selected" class="select-middle" :popper-append-to-body="false">
            <el-option v-for="(item, idx) in options"
            :key="idx" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </os-entry>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="site_investigate">{{$t('btn.start_scan')}}</div>
      </div>
    </div>
    <os-table :info="data.info">
      <tr v-for="(item, idx) in info_data" :key='idx' slot="table_list">
        <td v-for="(el, key) in info_map" :key='key'>
          {{item[el]}}
        </td>
        <td :key="4">
          <span :class="'signal' + item.signal"></span>
        </td>
      </tr>
    </os-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
  export default {
    data(){
      return {
        selected: "2",
        info_data: '',
        info_map: ['ssid', 'bssid', 'channel', 'enc'],
      }
    },
    computed:{
      ...mapState({
        perm: state=> state.info.perm.wifi
      }),
      data(){
        return this.$t('utils.investigate')
      },
      options(){
        let arr = this.data.select_signal
        if(this.perm.wifi_2 == "0"){
          arr.splice(0, 1)
        } else if(this.perm.wifi_5 == "0"){
          arr.splice(1, 1)
        }
        return arr
      }
    },
    methods: {
      site_investigate(){
        const loading = this.createLoading()
        this.$req.get('/webapi?op=site_survey', {
          params: {
            wifimode: this.selected
          }
        }).then(res=> {
          console.log(res)
          loading.close()
          let arr;
          if(res.split){
            arr = res.split('\n')
          } else {
            // res 为json对象
            res.data.forEach((el, hash)=> {
              let signal = parseInt(el.signal) // 负数值越大信号越强
              if(signal > -25){
                el.signal = 4
              } else if(signal > -50){
                el.signal = 3
              } else if(signal > -75){
                el.signal = 2
              } else if(signal >= -100 ){
                el.signal = 1
              }
            })
            this.info_data = res.data
            return
          }
          // console.log(arr, JSON.parse(arr.slice(arr.length-1)))
          let target_data = JSON.parse(arr.slice(arr.length-1)).data
          for(var i =1, j=0; i < arr.length; i+=2){
            // target_data[j].bssid = arr[i].split(' ')[1]
            // console.log(Object.prototype.toString(target_data[j]))
            // Object.defineProperty(target_data[j], 'bssid', {
            //   value: arr[i].split(' ')[1],
            //   enumerable: true,
            //   writable: true,
            //   configurable: false,
            //   // getter setter
            // })
            if(arr[i].split(' ')[1] == ""){
              continue
            }
            target_data[j] = {...target_data[j], bssid: arr[i].split(' ')[1],}
            j++
          }
          console.log(target_data)
          target_data.forEach((el, hash)=> {
            let signal = parseInt(el.signal) // 负数值越大信号越强
            if(signal > -25){
              el.signal = 4
            } else if(signal > -50){
              el.signal = 3
            } else if(signal > -75){
              el.signal = 2
            } else if(signal >= -100 ){
              el.signal = 1
            }
          })
          this.info_data = target_data
          console.log(target_data)
        })
      }
    },
    created(){
      this.$bus.emit('changeTab', 1)
    },
    activated(){
      this.$bus.emit('changeTab', 1)
    },
  }
</script>

<style lang="scss" scoped>

</style>
